{include file="public/header" /}

<head>
    <style>
        .subtitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.9375rem;
            font-size: 1rem;
        }

        .pro-list {
            justify-content: initial;
            flex-wrap: nowrap;
            column-gap: 0.6rem;
            overflow-x: auto
        }
        .pro-list li{
            width: calc(100% / 4);
            flex-shrink: 0;
        }
        .pro-list .pic{
            width: 100%;
            height: 5rem;
        }
        .product-list{
            margin: 1rem;
            border-radius: 1rem;
            overflow: hidden;
        }
        .product-list .item{
            background-color: #fff;
            padding: 1rem;
            display: flex;
            align-items: center;
        }
        .product-list li{
            border-bottom: 1px solid #eee;
        }
        .product-list li:last-child{
            border-bottom: none;
        }
        .product-list .item .pic{
            width: 5rem;
            margin-right: 1rem;
        }
        .product-list .item .name{
            font-size: 0.8rem;
        }
        .product-list .item .vip_price{
            font-size: 0.8rem;
            color: #f40;
        }
        .product-list .item .price{
            font-size: 0.6rem;
            color: #ccc;
            text-decoration: line-through;
        }
    </style>
</head>
<body class="bgc hide-top">
<div class="index-container">
    <img src="/static/index/img/icon45.png" alt="">
    <div class="index-content">
        <div class="pro-list-search index-search">
            <div class="rgt">
                <img src="/static/index/img/icon43.png" alt="">
                <input type="text" placeholder="输入商品关键字搜索" disabled>
                <p class="flex-center" onclick="load_href('{:url(\'product/search\')}',2)">搜索</p>
            </div>
        </div>
        <div class="index-swiepr">
            <div class="swiper">
                <div class="swiper-container carousel">
                    <div class="swiper-wrapper">
                        {foreach name="carousel" item="vo"}
                        <div class="swiper-slide" data-id="1">
                            <img src="{$vo.images}" alt=""/>
                        </div>
                        {/foreach}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!--        <div class="index-swiepr swiper-nav">-->
        <!--            <div class="swiper">-->
        <!--                <div class="swiper-container carousel-nav">-->
        <!--                    <div class="swiper-wrapper">-->
        <!--                        <div class="swiper-slide flex-center">-->
        <!--                            <ul class="nav-list">-->
        <!--                                {foreach name="cate" item="vo"}-->
        <!--                                <li onclick="load_href('{:url(\'product/index\')}?cate_1={$vo.id}',2)">-->
        <!--                                    <p class="flex-center">-->
        <!--                                        <img src="{$vo.icon}" alt="">-->
        <!--                                    </p>-->
        <!--                                    <p>{$vo.title}</p>-->
        <!--                                </li>-->
        <!--                                {/foreach}-->
        <!--                            </ul>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <ul class="index-shop">
            {foreach name="cate" item="vo"}
            <li onclick="load_href('{:url(\'product/index\')}?cate_1={$vo.id}',2)">
                <div>
                    <p>{$vo.title}</p>
                    <p class="hint">更多好物值得信赖</p>
                    <p class="go">GO ></p>
                </div>
                <p class="flex-center">
                    <img src="/static/index/img/icon99.png" alt="">
                </p>
            </li>
            {/foreach}
            <!--            <li onclick="load_href('{:url(\'product/index\')}?cate_1=2',2)">-->
            <!--                <div>-->
            <!--                    <p>兑换专区</p>-->
            <!--                    <p class="hint">最新好物等你来</p>-->
            <!--                    <p class="go">GO ></p>-->
            <!--                </div>-->
            <!--                <p class="flex-center">-->
            <!--                    <img src="/static/index/img/icon28.png" alt="">-->
            <!--                </p>-->
            <!--            </li>-->
        </ul>

        <div class="index-title flex-center" style="color: #FFFFFF">
            <img src="/static/index/img/icon46.png" alt="">热门推荐
            <img src="/static/index/img/icon47.png" alt="">
        </div>

        <div class="tpl_list" style="padding-bottom: 5rem">

        </div>
    </div>
</div>
<script id="template" type="text/html">
    <ul class="product-list">
        {{# for(var i = 0; i < d.data.length; i++){ }}
        <li>
            <a href="{:url('product/details')}?id={{d.data[i].id}}" class="item">
                    <img lay-src="{{d.data[i].icon}}" src="{{d.data[i].icon}}" alt="" class="pic">
                <div style="flex: 1">
                    <p class="name">{{d.data[i].title}}</p>
                    <div >
                        <span class="vip_price">{{d.data[i].vip_price}}</span>
                        <span class="price">{{d.data[i].price}}</span>
                    </div>
<!--                    <p class="flex-layout">-->
<!--&lt;!&ndash;                        销量{{d.data[i].sales}}&ndash;&gt;-->
<!--                    </p>-->
                </div>
            </a>
        </li>
        {{# } }}
    </ul>
</script>

{include file="public/menu" select="1" /}
</body>
{include file="public/footer"/}
<script src="/static/index/js/swiper-bundle.js"></script>
<script>
    $(function () {
        getFlow(1, "{:url('product/getList')}?pick=1");

        var swiper = new Swiper('.carousel', {
            pagination: {
                el: '.swiper-pagination',
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            loop: true
        });
    })
</script>
</html>